{% extends "base.html" %}

{% block stylesheets %}
{% endblock %}

{% block content %}
<div class="jumbotron home">
    <div class="container">
        <h1 id="team-id">{{ team.name }}</h1>
    </div>
</div>
<div class="container main-container">
    {% if errors %}
            <div id='errors' class="row">
        {% for error in errors %}
                <h1>{{ error }}</h1>
        {% endfor %}
            </div>
    {% else %}

        {% if score_frozen %}
        <div class="container main-container">
            <div class="row">
                <h1>Scoreboard has been frozen.</h1>
            </div>
        </div>
        {% endif %}

    <div class="team-info">
        <h2 id="team-place" class="text-center">
            {%if place %}
                {{ place }} <small>place</small>
            {% endif %}
        </h2>
        <h2 id="team-score" class="text-center">
            {%if score %}
                {{ score }} <small>points</small>
            {% endif %}
        </h2>
    </div>

    <br>

    <div class="window">
      <div class="window-inner">
        <div id="keys-pie-graph"></div>
        <div id="categories-pie-graph"></div>
        <div class="clear"></div>
      </div>
    </div>
    <br>
    <div class="window">
      <div class="window-inner">
        <div id="score-graph"></div>
      </div>
    </div>

    <div class="clearfix"></div>

    {% if awards %}
    <div class="row">
        <h3>Awards</h3>
            {% for award in awards %}
                {% set count= awards|length - loop.index %}
                {% set rem = awards|length % 4 %}
                {% if count < rem %}
                    <div class="col-xs-{{ (12//rem)|string }} col-md-{{ (12//rem)|string }}">
                {% else %}
                    <div class="col-xs-3 col-md-3">
                {% endif %}
                        <p class="text-center"><strong>{{ award.name }}</strong></p>
                        {% if award.category %}<p class="text-center">{{ award.category }}</p>{% endif %}
                        <p class="text-center">{{ award.description }}</p>
                        <p class="text-center">{{ award.value }}</p>
                    </div>
            {% endfor %}
    </div>

    <br>
    {% endif %}

    <div class="row">
        <h3>Solves</h3>
        <table class="table table-striped">
            <thead>
                <tr>
                    <td><b>Challenge</b></td>
                    <td class="hidden-xs"><b>Category</b></td>
                    <td><b>Value</b></td>
                    <td><b>Time</b></td>
                </tr>
            </thead>
            <tbody>
            {% for solve in solves %}
                <tr>
                    <td><a href="{{ request.script_root }}/challenges#{{ solve.chal.name }}">{{ solve.chal.name }}</a></td>
                    <td class="hidden-xs">{{ solve.chal.category }}</td><td>{{ solve.chal.value }}</td>
                    <td class="solve-time"><script>document.write( moment({{ solve.date|unix_time_millis }}).local().format('MMMM Do, h:mm:ss A'))</script></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/vendor/plotly.min.js"></script>
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/utils.js"></script>
    <script src="{{ request.script_root }}/themes/{{ ctf_theme() }}/static/js/team.js"></script>
{% endblock %}
